<script setup>
import { inject } from 'vue'
import { myInjectionKey } from '../../utils/keys'

// 默认值是在确认没有任何组件提供的时候生效
const message = inject('message', 'default')
// 和响应式数据配合使用，对状态的修改尽量都放在提供方组件中，这样可以保证状态的声明和变更都聚合在同一个组件，更容易维护。
// 如需要在接收方组件更改状态，我们推荐在提供方声明一个修改状态的方法并提供给接收方。
const { location, updateLocation } = inject('location')

const count = inject('read-only-count')
console.log(myInjectionKey, 'inject')
const symKeys = inject(myInjectionKey)
</script>

<template>
  <p>
    Message to grand child: {{ message }}
  </p>
  <hr />
  <button @click="updateLocation">{{location}}</button>
  <hr />
  <button @click="count++">{{count}}</button>
  <hr />
  <h3>使用Symbol作为注入名</h3>
  <p>{{symKeys}}</p>
</template>